extends layout

block content
  - var imagelikes = image.likes ? image.likes : 0
  - var viewtimes = image.viewtimes ? image.viewtimes : 0
  include includes/header.pug
  main(role='main')
    section.jumbotron.bg-light
      .container
        .card
          img.card-img-top(src=`/uploads/${image.diskfilename}` alt=image.title)
          .card-body.d-flex.justify-content-between
            div.inline-block
              h4= image.title
              p.text-muted  by 
                span= uploader.nickname
              p= image.description
              i.fas.fa-eye= " " + viewtimes + "  "
              button.far.fa-thumbs-up#like-btn(data-imageid=image._id, style='border:0;background-color:#ffffff')= " " + imagelikes
        .card
          .card-body
            h5.card-title Comments
            form(action=`/comments/${image._id}`, method="post")
              .form-group.row
                label.col-12.col-md-3 E-mail
                input.col-12.col-md-9.form-control(type="email", name="email")
              .form-group.row
                label.col-12.col-md-3 Nickname
                input.col-12.col-md-9.form-control(type="text", name="nickname")
              .form-group.row
                label.col-12.col-md-3 Comment
                textarea.col-12.col-md-9.form-control(rows="5", name="comment")
              .form-group.row
                .col-12.offset-md-8.col-md-4
                  button.btn.btn-primary.btn-block(type="submit") Save
        .list-group
          each comment in comments
            a.list-group-item
              h4.list-group-item-heading= comment.nickname
              p.list-group-item-text= comment.comment
          
  include includes/footer.pug
  script(src='https://code.jquery.com/jquery-3.2.1.slim.min.js', integrity='sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN', crossorigin='anonymous')
  script.
    window.jQuery || document.write('<script src="../public/javascripts/jquery-slim.min.js"><\\\\/script>')
  script(src='/javascripts/popper.min.js')
  script(src='/javascripts/bootstrap.min.js')
  script(src='/javascripts/holder.min.js')
  script(src="/javascripts/show.js")